function createLineElement(x, y, length, angle) {
    var line = document.createElement("div");
        line.className='line'
    var styles = 'border: 1px solid black; '
               + 'width: ' + length + 'px; '
               + 'height: 0px; '
               + '-moz-transform: rotate(' + angle + 'rad); '
               + '-webkit-transform: rotate(' + angle + 'rad); '
               + '-o-transform: rotate(' + angle + 'rad); '  
               + '-ms-transform: rotate(' + angle + 'rad); '  
               + 'position: absolute; '
               + 'top: ' + y + 'px; '
               + 'left: ' + x + 'px; ';
    line.setAttribute('style', styles);  
    return line;
}

function createLine(x1, y1, x2, y2) {
    var a = x1 - x2,
        b = y1 - y2,
        c = Math.sqrt(a * a + b * b);

    var sx = (x1 + x2) / 2,
        sy = (y1 + y2) / 2;

    var x = sx - c / 2,
        y = sy;

    var alpha = Math.PI - Math.atan2(-b, a);

    return createLineElement(x, y, c, alpha);
}
// 获取元素坐标
function getElementOffset(element) {
  let offset = { left: 0, top: 0 }
  let current = element.offsetParent

  offset.left += element.offsetLeft
  offset.top += element.offsetTop

  while (current !== null) {
    offset.left += current.offsetLeft
    offset.top += current.offsetTop
    current = current.offsetParent
  }
  return offset
}

//两点画直线
 export function drawLine(dome1, dome2){
    let xy1 = getElementOffset(dome1);
   let  xy2 = getElementOffset(dome2);
   
  let  height1 = dome1.offsetHeight;
   let w1 = dome1.offsetWidth;
  let   w2 = dome2.offsetWidth;
    document.body.appendChild(createLine(xy1.left + (w1 / 2), xy1.top + height1, xy2.left + (w2 / 2), xy2.top));
}